<template>
  <div>
    <el-card class="main-card">
      <div slot="header">
        <el-page-header @back="goBack" content="优惠券添加"></el-page-header>
      </div>
      <div>
        <el-form ref="form" :model="formData" label-width="7rem">
          <el-form-item label="优惠券名称">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="发放日期">
         
            <el-date-picker
              v-model="formData.issueDate"
              type="datetime"
              placeholder="datetime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="使用日期">
            <el-date-picker
              v-model="formData.useDateTimeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="发放数量">
            <el-radio-group v-model="total" @change="totalHandler">
              <el-radio label="无限"></el-radio>
              <el-radio label="有限">
                <span v-if="total_show_input">
                  <el-input
                    v-model="formData.total"
                    placeholder="请输入数量"
                    size="small"
                  ></el-input>
                </span>
                <span v-else>有限</span>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="可用范围">
            <el-radio-group v-model="formData.range" @change="changeHandler">
              <el-radio label="全场通用" value="全场通用" ></el-radio>
              <el-radio label="部分" value="部分"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="类型">
            <div class="multi-item">
               <el-select v-model="formData.type" placeholder="请选择">
                <el-option
                  label="有价券"
                  value="有价券">
                </el-option>
                 <el-option
                  label="免费券"
                  value="免费券">
                </el-option>
              </el-select>
              <span class="letter">满</span><el-input v-model="formData.threshold" placeholder=""></el-input><span class="letter">减</span><el-input v-model="formData.discount" placeholder=""></el-input>
            </div>
             
             
          </el-form-item>
          <el-form-item label="售价" v-if="formData.type=='有价券'">
            <el-input v-model="formData.price"></el-input>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="10">
              <el-col :span="6" :offset="9">
                <el-button type="primary" class="m-el-button" @click="add">添加</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!--上架车位-->
    <el-dialog title="" :visible.sync="dialogVisible" width="width">
      <div>
        <el-card v-if="dialogFirstCardShow">
          <div slot="header">已上架车位</div>
          <div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="id" label="编号" width="width">
              </el-table-column>
              <el-table-column prop="explain" label="名称" width="width">
              </el-table-column>
              <el-table-column prop="type" label="类型" width="width">
              </el-table-column>
              <el-table-column prop="state" label="状态" width="width">
              </el-table-column>
              <el-table-column label="包含车位">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="showDetail(scope.$index, scope.row)"
                  >
                    >>
                  </el-button>
                </template>
              </el-table-column>

            </el-table>
          </div>
        </el-card>

        <el-card v-else>
          <div slot="header">
            <el-page-header
              @back="sub_goBack"
              content="该区域车位"
            ></el-page-header>
          </div>
      
          <div class="el-tran">
            <el-transfer
              v-model="dialogChoosedItems"
              :props="{
                key: 'name',
                label: 'name'
              }"
              :data="dialogCurrentItem_parking">
            </el-transfer>
          </div>
        </el-card>

        <el-card>
          <div slot="header">已经选中</div>
          <div>
            <el-tag
              v-for="item of dialogChoosedItems"
              :key="item"
              closable
              @close="removeTag(item)"
              >{{ item }}</el-tag
            >
          </div>
        </el-card>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script scoped>

import { mapState } from "vuex";
import m_axios from '../assets/m_axios'
export default {
  created(){
    this.checkIsUpadePage()
  },
  computed: {
    ...mapState(["current_property_index","current_property"]),
    dialogCurrentItem_parking() {
      let arr = [];
      for (let i of this.dialogCurrentItem) {
        arr.push({ name: i });
      }
      return arr;
    },
  },
  methods: {
    checkIsUpadePage(){
      let create_arr=function(obj){
        if(obj==""){
          return []
        }else{
          return obj.split(',')
        }
      }
      this.showUpdate = this.$route.params.isUpdate ? true:false
      if(this.showUpdate){
        let data = this.$route.params.allInfo
        this.formData.name = data.couponname
        this.formData.issueDate = new Date(data.issueDate)
        this.formData.useDateTimeRange = [new Date(data.createtime),new Date(data.finishtime)]
        this.formData.total = data.count=="无限"?-1:data.count
        this.formData.type = data.price&&data.price!=0?'有价券':"免费券"
        this.formData.range = create_arr(data.parkinglist)
        this.formData.threshold = data.money
        this.formData.discount = data.hmoney
        this.formData.price =  data.price&&data.price!=0?data.price:0
      }
    
    },
    add(){
      let propertyname = this.current_property.area
      let count = "-1"
      if(this.total=='有限'){
        count = this.formData.total+""
      }else{
        count = "-1"
      }
      let targetid = this.$store.state.current_property_index
      let name = this.$store.state.account
      let data={
        developer:name,
        propertyname:propertyname,
        couponname:this.formData.name,
        hmoney:this.formData.threshold,
        money:this.formData.discount,
        issuedate:this.formData.issueDate.valueOf()/1000+"",
        createtime:this.formData.useDateTimeRange[0]/1000+"",
        finishtime:this.formData.useDateTimeRange[1]/1000+"",
        count:count,
        parkinglists:this.dialogChoosedItems,
        type1:this.formData.range,
        price:this.formData.price
      }
      console.log(data)
      //这里是有价券
      let url = "http://47.99.124.245:8082/addCoupon1"
      if(data.parkinglists.length==0){
          this.$delete(data,"parkinglists")
      }
      if(this.formData.type == "免费券"){
        this.$delete(data,"price")
        url = "http://47.99.124.245:8082/addCoupon"
      }
      m_axios.addItem.bind(this)("post",url,data)
      .then(res=>{
        this.$router.go(-1)
      })
    },
    changeHandler(){
      
      if(this.formData.range == "部分"){
        this.dialogVisible = true
      }
    },
    removeTag(item) {
      let index = this.dialogChoosedItems.indexOf(item);
      this.dialogChoosedItems.splice(index, 1);
    },
    choose_table_click(row, column, event) {
      let index = this.dialogChoosedItems.indexOf(row.name);
      if (index == -1) {
        this.dialogChoosedItems.push(row.name);
      } else {
        this.dialogChoosedItems.splice(index, 1);
      }
    },
    sub_goBack() {
      this.dialogFirstCardShow = true;
    },
    showDetail(index, row) {
      this.dialogFirstCardShow = false;
      this.dialogCurrentItem = this.tableData[index].parking;
    },
    totalHandler(label) {
      if (label == "无限") {
        this.total_show_input = false;
        this.formData.total = -1;
      } else {
        this.formData.total = "";
        this.total_show_input = true;
      }
    },
    goBack() {
      this.$router.go(-1)
    },
  },
  data() {
    return {
      showUpdate:false,
      transferChooseItems:[],
      dialogChoosedItems: [],
      dialogCurrentItem: "",
      dialogFirstCardShow: true,
      dialogVisible: false,
      range: "",
      total_show_input: false,
      total: "",
      //发起一次请求获得已经上架的车位的情况
      tableData: [
        {
          id: "001",
          explain: "东区热销更新",
          type: "普通销售",
          state: "未开始",
          parking: ["A001", "A002", "A003"],
        },
      ],
      formData: {
        name: "",
        issueDate: "",
        useDateTimeRange:"",
        endUseDateTime: "",
        total: 0,
        type: "免费券",
        range:"",
        threshold:0,
        discount:0,
        price:0,
      },
    };
  },
};
</script>

<style scoped>
.letter{
  margin:0px 2rem
}
.m-el-button {
  width: 100%;
}
.el-card {
  margin-top: 2rem;
}
.el-tag {
  margin: 0.5rem;
}
.el-form {
  width: 80%;
  margin: auto;
}
.el-input {
  width: 80%;
}
.el-tran >>> .el-transfer__buttons{
  padding: 0;
  display: flex;
  align-items: center;
  margin: 0.5rem;
}
.el-tran >>> .el-button:first-child{
  margin-bottom: 0;
}
.el-transfer{
  display: flex;
}
.multi-item{
  display: flex;
}
.multi-item .el-input{
  width: 4rem;
}
</style>